.ui-nav-panel__scope {
	--color-background: rgba(82,92,105,.08);
	--color-white : #fff;
	--color-white-alpha-015: rgba(255,255,255,.15);
	--color-white-alpha-50: rgba(255,255,255,.5);
	--color-white-alpha-80: rgba(255,255,255,.8);
	--color-gray-alpha-80: rgba(82,92,105,.8);
	--color-gray-alpha-40: rgba(82,92,105,.4);
}

.ui-nav-panel {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;
	padding: 4px 6px;
	margin-right: 10px;
	border-radius: 16px;
	background-color: var(--color-background);
}

.ui-nav-panel__item {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	position: relative;
	margin: 0 13px;
	color: var(--color-gray-alpha-80);
	white-space: nowrap;
	-webkit-transition: color .3s;
	-o-transition: color .3s;
	transition: color .3s;
	cursor: pointer;
}

.ui-nav-panel__item:hover {
	color: var(--color-white);
}

.ui-nav-panel__item.active {
	color: var(--color-white);
}

.ui-nav-panel__item.active:after {
	content: '';
	position: absolute;
	bottom: 1px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--color-gray-alpha-40);
}

.bitrix24-light-theme .ui-nav-panel {
	background-color: var(--color-white-alpha-015);
}

.bitrix24-light-theme .ui-nav-panel__item {
	color: var(--color-white-alpha-80);
}

.bitrix24-light-theme .ui-nav-panel__item.active:after {
	background-color: var(--color-white-alpha-50);
}
